<template>
	<!-- 社交链接 -->
	<div class="social">
		<div class="link">
			<a
				v-for="item in socialLinksData"
				:key="item.id"
				:href="item.url"
				target="_blank"
				@mouseenter="socialTip = item.tip"
				@mouseleave="socialTip = '通过这里联系我吧'"
			>
				<img class="icon" :src="ImgUrl + item.icon" height="24" />
			</a>
		</div>
		<span class="tip">{{ socialTip }}</span>
	</div>
</template>

<script setup lang="ts">
import { getLinkList } from "@/api/modules/home";
import { onMounted, ref } from "vue";

onMounted(() => {
	getList();
});
const ImgUrl = import.meta.env.VITE_IMG_URL;
const socialLinksData = ref<any>([]);
const socialTip = ref("");
const getList = async () => {
	const { data } = await getLinkList();
	socialLinksData.value = data;
};
</script>

<style lang="scss" scoped>
.social {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 460px;
	height: 42px;
	margin-top: 1rem;
	background-color: transparent;
	border-radius: 6px;
	transition: all 0.5s;
	animation: fade 0.5s;
	animation: fade;
	backdrop-filter: blur(0);
	@media (max-width: 840px) {
		justify-content: center;
		max-width: 100%;
		.link {
			justify-content: space-evenly !important;
			width: 90%;
		}
		.tip {
			display: none !important;
		}
	}
	.link {
		display: flex;
		align-items: center;
		justify-content: center;
		a {
			display: inherit;
			.icon {
				margin: 0 12px;
				transition: all 0.3s;
				&:active {
					transform: scale(0.9);
				}
			}
		}
	}
	.tip {
		display: none;
		margin-right: 12px;
		animation: fade 0.5s;
		animation: fade;
	}
	@media (min-width: 768px) {
		&:hover {
			background-color: #00000040;
			backdrop-filter: blur(5px);
			.tip {
				display: block;
			}
		}
	}
}
</style>
